<template>
     
     <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-tickets"></i>
                    部门管理
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
    
        <div class="container"   v-loading="listLoading">
            <el-row slot="body" style="margin-bottom: 20px;" :gutter="24">
                <el-col :span="6" :xs="24" :sm="24" :md="6" :lg="6" style="margin-bottom: 20px;">
                    <el-tree
                        class="filter-tree"
                        show-checkbox
                        :data="data2"
                        :props="TreetProps"
                        default-expand-all 
                        @node-click	="handleNodeClick"      
                        :render-content="renderContent"          
                        ref="tree2" node-key="parentId" >
                    </el-tree>         
                </el-col>
       
            <el-col :span="18" :xs="24" :sm="24" :md="18" :lg="18">
                <el-card class="box-card">

                <div class="handle-box" v-show="false"> 
                     <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
                        <el-form :inline="true"    class="demo-form-inline" >
                                <el-form-item label="部门ID">
                                    <el-input v-model="search.userid" style=""  placeholder="部门ID" size="mini"></el-input>
                                </el-form-item>
                                <el-form-item label="部门名称">
                                    <el-input v-model="search.username" placeholder="部门名称" size="mini"></el-input>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary"   round icon="el-icon-search">搜索</el-button>                           
                                </el-form-item>
                            </el-form>
                    </el-col>
                </div>
                    <!--新增按钮-->
                    <template>                             
                        <div class="btn">
                            <el-button   type="success" icon="el-icon-circle-plus-outline" @click="handleAddShow" size="mini" round>新增</el-button>      
                            <el-button type="danger" icon="el-icon-delete" @click="handleDeleteList" size="mini" round>删除</el-button>
                        </div>
                        <div>
                            <el-form :model="deptData"  style="width:60%" ref="deptData" :rules="rules">           
                                <el-form-item   label="上级部门" :label-width="labelwidth">  
                                        <select-tree v-model="deptData.parentid" :options="data2" :props="TreetProps"   clearable
                                placeholder="请选择父级" ></select-tree>
                                </el-form-item> 
                                <el-form-item label="部门名称" :label-width="labelwidth" prop="deptname">
                                    <el-input v-model="deptData.deptname">
                                    </el-input>
                                </el-form-item>

                                <el-form-item label="部门编码" :label-width="labelwidth" prop="deptcode">
                                    <el-input v-model="deptData.deptcode">
                                    </el-input>
                                </el-form-item>
                        </el-form> 
                        <div slot="footer" class="dialog-footer">                            
                            <el-button type="primary" @click="AddDept('deptData')" v-text="deptData.istype=='add'?'新增':'修改'" ></el-button>
                            <el-button @click="resetForm('deptData')">重置</el-button>
                        </div>
                        </div>
                    </template>  
                </el-card>
            </el-col>     
                 </el-row>    
        </div>
   <adeptadd ref="dtptd"  v-bind:DeptTree='DeptTree'></adeptadd>
    </div>
     
</template>
<script>
import SelectTree from '../../common/selectTree.vue';
import merge from 'element-ui/src/utils/merge';
import adeptadd from './deptAdd';
export default {
    
    data(){
        return{
            deptData:{
                istype:'add',
                parentid:null,
                deptname:'',
                deptcode:''
            },
            labelwidth:'120px',
            rules:{
                parentid:[
                    {required:true,message:'请选择部门',trigger:'change'}
                ],
                deptname:[
                    {required:true,message:'请输入部门名称',trigger:'change'}
                ],
                deptcode:[
                    {required:true,message:'请输入部门编码',trigger:'change'}
                ]
            },
            DeptTree:[],
            // 列表数据
            tabbleDta:[],
            // 列表Loading加载
            listLoading: true,
            search:{},
            currentPage:0,
            pageSize:10,
            total:0 ,                 
            filterText: '',
            data2:[],
            TreetProps: {
                children: 'children',
                label: 'deptname',
                value:'deptid'
            },
            resourceTree:[],
              // 数据列表
             options: [] 
        }
    },
    mounted(){
    this.listLoading = true;
     //初始化加载数据
    this.getResult();
    this.gettree();

    },
    methods:{
        // 获取当前点击的树进行数据查询
        handleNodeClick(data) {      

            this.deptData = merge({}, data);

        //     var _this = this;         
        //    if(nodedata.deptid!=""||nodedata.deptid!=null){
        //        _this.deptData.istype = 'edit';
        //        _this.deptData = JSON.parse(JSON.stringify(nodedata));
             
                
        //    }else{
        //         _this.$message({message:'失败',type:'error'});
        //    } 
        },
         renderContent(h, {node, data, store}) {
            return (
            <span>
                <span>
                <span>{node.label}</span>
                </span>
            </span>);
        },
        gettree(){
            var _this = this;
            _this.$api.Depttree().then((res)=>{
            _this.listLoading = false;
                if(res.result =='ok'){
                    _this.data2 =res.data;
                    _this.resourceTree = res.data;               
                }    
           }).catch((err)=>{
                _this.$message({ message:'数据获取失败', type:'error'});
           });  
        },
        getTableData(){
           // this.tabbleDta =this.tabbleDta.slice()
        },
        // 获取列表数据
        getResult(){
           // DeptAdd,DeptEdit,DeptList,DeptDelete
           var _this = this;
           _this.$api.DeptList().then((res)=>{
            _this.listLoading = false;
               if(res.result =='ok'){
                    _this.tabbleDta = res.data;
               }    
           }).catch((err)=>{
               _this.$message({message:'数据获取失败',  type:'error'});
           });
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        },
        //重置
        resetForm(){
            //this.$refs.deptData.resetFields();
           this.deptData={      
                istype:'add',
                parentid:null,
                deptname:null,
                deptcode:null          
           };
        },
        AddDept(deptData){

            var _this = this;  
            if(_this.deptData.istype=='add'){
               //  _this.deptData.parentid = _this.$refs['selecttrees'].valueModel;
            }       
            _this.$refs[deptData].validate((valid)=>{             
            if(valid){               
                // 开启动画
                _this.listLoading = true;
                var dd='DeptAdd';
                if(_this.deptData.istype !='add'){
                    _this.$api.DeptEdit(_this.deptData).then((res)=>{
                    //关闭动画
                        _this.listLoading = false;                      
                        // 数据返回成功
                        if(res.result=='ok'){                     
                            _this.$message({message:res.msg,type:'success'});
                       
                            _this.gettree(); 
                                                                       
                        }
                    }).catch((err)=>{
                        _this.$message({  message:err.msg,   type:'error'});
                    })  
                }else{
                    _this.$api.DeptAdd(_this.deptData).then((res)=>{
                        //关闭动画
                        _this.listLoading = false;                      
                        // 数据返回成功
                        if(res.result=='ok'){                     
                            _this.$message({message:res.msg,type:'success'});
                            _this.gettree();                                               
                        }
                    }).catch((err)=>{
                        _this.$message({  message:err.msg,   type:'error'});
                    })  
                }
                
            }else{            
                console.log("失败");
            }
            }); 
        },
        // 添加用户
        handleAddShow(){
            this.deptData.istype = 'add';
            this.resetForm();
            // var trid =this.$refs.tree2.getCheckedNodes()||"";
            // if(trid ==""){
            //     this.$message({message:'请选择左边树,添加部门',type:'error'});
            //     return;
            // }
            //   this.$refs['dtptd'].Visible =true; 
            //   this.DeptTree =  this.$refs.tree2.getCheckedNodes();
        },
        // 删除
        handleDeleteList(){

        }
    },components:{
       SelectTree,adeptadd
    }
}
</script>

<style scoped>
 
    .btn{
        margin-bottom: 1rem;
        
    }
 
    .el-tree{
        border: 1px solid #d1dbe5
    }
 
 
</style>
 